<template>
  <div class="box">
    <div class="selectBox">
      <el-button v-waves class="filter-item btn" plain size="small" type="success" @click="handleJs">
        重新生成推广文件
      </el-button>
      <!-- <el-button v-waves class="filter-item btn" type="success" @click="handleHtml">
        一键生成HTML文件
      </el-button> -->
    </div>
    <!-- <div class="selectBox" style="margin-top:80px">
      停用站长：
      <el-select v-model="listQuery.qudao" style="width: 300px" clearable filterable class="filter-item">
        <el-option v-for="(item, index) in list" :key="index" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="danger" icon="el-icon-close" @click="handleDel">
        停用站长
      </el-button>
    </div>
    <div class="btnBox">
      启用站长：
      <el-select v-model="listQuery1.qudao" style="width: 300px" clearable filterable class="filter-item">
        <el-option v-for="(item, index) in list1" :key="index" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-check" @click="handleOpen">
        启用站长
      </el-button>
    </div> -->
    <div class="selectBox" style="margin-top:80px">
      <div v-for="(item,index) in linkArr" :key="index" style="margin-top: 10px;">
        {{ index === 0 ? '默认地址 ：' : '链接地址' + index + '：' }}
        <el-input v-model="linkArr[index].domain" placeholder="请输入站长JS的链接目录" style="width: 300px;" class="filter-item linkMargin" />
        站长号：
        <el-input v-model="linkArr[index].qudao" placeholder="请输入站长账号，多个用逗号隔开" style="width: 300px;" class="filter-item" />
        <el-button v-waves class="filter-item" type="danger" plain size="small" icon="el-icon-delete" :disabled="index === 0" @click="handleDelLink(index, item)">
          删除
        </el-button>
      </div>
      <div style="margin-top: 30px;">
        <el-button v-waves class="filter-item" type="success" plain size="small" icon="el-icon-plus" style="margin-right: 30px" @click="handleAddLink">
          新增地址
        </el-button>
        <el-button v-waves class="filter-item" type="primary" plain size="small" icon="el-icon-edit" style="margin-left: 30px" @click="handleUpdateLink">
          修改地址
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchLink, updateLink, createJs, delLink } from '@/api/cnzz/clean'
import waves from '@/directive/waves' // waves directive
import { MessageBox, Message } from 'element-ui'

export default {
  name: 'Clean1',
  directives: { waves },
  data() {
    return {
      list: [],
      list1: [],
      listQuery: {
        qudao: ''
      },
      listQuery1: {
        qudao: ''
      },
      linkArr: []
    }
  },
  created() {
    // this.getList()
    // this.getList1()
    this.getList2()
  },
  methods: {
    // getList() {
    //   fetchList().then(response => {
    //     this.list = response.channel
    //   })
    // },
    // getList1() {
    //   fetchList1().then(response => {
    //     this.list1 = response.channel
    //   })
    // },
    // handleDel() {
    //   if (!this.listQuery.qudao) {
    //     Message({
    //       message: '请先选择一个站长后再停用',
    //       type: 'error',
    //       duration: 2 * 1000
    //     })
    //     return
    //   }
    //   MessageBox.confirm('确定将站长号为 ' + this.listQuery.qudao + '的站长停用吗', '确认', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     const loading = this.$loading({
    //       lock: true,
    //       text: 'Loading',
    //       spinner: 'el-icon-loading',
    //       background: 'rgba(0, 0, 0, 0.7)'
    //     })
    //     deleteData(this.listQuery).then(response => {
    //       loading.close()
    //       if (response.code === 1) {
    //         this.listQuery.qudao = ''
    //         this.getList()
    //         this.getList1()
    //         Message({
    //           message: response.msg || '停用成功',
    //           type: 'success',
    //           duration: 2000
    //         })
    //       } else {
    //         Message({
    //           message: response.msg || '停用失败',
    //           type: 'error',
    //           duration: 2000
    //         })
    //       }
    //     })
    //   }).catch(() => {})
    // },
    // handleOpen() {
    //   if (!this.listQuery1.qudao) {
    //     Message({
    //       message: '请先选择一个站长后再启用',
    //       type: 'error',
    //       duration: 2 * 1000
    //     })
    //     return
    //   }
    //   MessageBox.confirm('确定将站长号为 ' + this.listQuery1.qudao + '的站长启用吗', '确认', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     const loading = this.$loading({
    //       lock: true,
    //       text: 'Loading',
    //       spinner: 'el-icon-loading',
    //       background: 'rgba(0, 0, 0, 0.7)'
    //     })
    //     openData(this.listQuery1).then(response => {
    //       loading.close()
    //       if (response.code === 1) {
    //         this.listQuery1.qudao = ''
    //         this.getList()
    //         this.getList1()
    //         Message({
    //           message: response.msg || '启用成功',
    //           type: 'success',
    //           duration: 2000
    //         })
    //       } else {
    //         Message({
    //           message: response.msg || '启用失败',
    //           type: 'error',
    //           duration: 2000
    //         })
    //       }
    //     })
    //   }).catch(() => {})
    // },
    getList2() {
      fetchLink().then(response => {
        this.linkArr = response.data
      })
    },
    handleJs() {
      MessageBox.confirm('确定重新生成所有的JS文件吗', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        createJs().then(response => {
          if (response.code === 1) {
            Message({
              message: response.msg || '生成成功',
              type: 'success',
              duration: 2000
            })
          } else {
            Message({
              message: response.msg || '生成失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(() => {})
    },
    // handleHtml() {
    //   MessageBox.confirm('确定重新生成所有的html文件吗', '确认', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     createHtml().then(response => {
    //       if (response.code === 1) {
    //         Message({
    //           message: response.msg || '生成成功',
    //           type: 'success',
    //           duration: 2000
    //         })
    //       } else {
    //         Message({
    //           message: response.msg || '生成失败',
    //           type: 'error',
    //           duration: 2000
    //         })
    //       }
    //     })
    //   }).catch(() => {})
    // },
    handleAddLink() {
      this.linkArr.push({
        domain: '',
        qudao: ''
      })
    },
    handleDelLink(num, item) {
      MessageBox.confirm('确定删除该链接吗', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (item.id) {
          const data = {
            id: item.id
          }
          delLink(data).then(response => {
            if (response.code === 1) {
              Message({
                message: response.msg || '删除成功',
                type: 'success',
                duration: 2000
              })
              this.linkArr.splice(num, 1)
              this.getList2()
            } else {
              Message({
                message: response.msg || '删除失败',
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          this.linkArr.splice(num, 1)
        }
      }).catch(() => {})
    },
    handleUpdateLink() {
      const data = {
        data: this.linkArr
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      updateLink(data).then(response => {
        loading.close()
        if (response.code === 1) {
          Message({
            message: response.msg || '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          Message({
            message: response.msg || '修改失败',
            type: 'error',
            duration: 2000
          })
          this.getList2()
        }
      })
    }
  }
}
</script>

<style scoped>
.box{
  margin: 200px auto;
  width:1000px;
}
.selectBox{
  width: 100%;
  text-align: center;
}
.btnBox{
  margin-top: 30px;
  text-align: center;
}
.linkMargin{
  margin-right: 20px;
}
@media (max-width:550px){
  .box{
    margin: 200px auto;
    width: 320px;
  }
  .filter-item{
    margin-top: 10px;
  }
  .linkMargin{
    margin-right: 0px;
  }
}
</style>
